<script setup>
import * as echarts from 'echarts'
import { onMounted,ref } from "vue";
import avatar1 from'@/assets/image/useravatar/avatar1.jpg'
import avatar2 from'@/assets/image/useravatar/avatar2.jpg'
import avatar3 from'@/assets/image/useravatar/avatar3.jpg'
import axios from 'axios';
import 'echarts-wordcloud'; 
import '@/assets/css/details.css'
import { useRoute,useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const token = localStorage.getItem('token');
const carId = route.params.id;
const cars = ref([]);
const Radar_chart = ref([]);
const comment = ref([]);
const currentPage = ref(1);  // 当前页码
const pageSize = ref(10);    // 每页条数
const total = ref(0);        // 数据总数
onMounted(() => {
    getComment();
});
function getComment() {
  // 使用axios或其他方式将数据发送到后端
  axios.post('http://127.0.0.1:8000/car/api/car_details/', carId,
        {
            page: currentPage.value,  // 发送当前页码给后端
            page_size: pageSize.value  // 发送每页条数给后端
        }
    )
        .then(response => {
            // 处理后端返回的数据
            cars.value = response.data.cars;
            Radar_chart.value = response.data.Radar_chart
            comment.value = response.data.comments;
            total.value = response.data.cars.total;  // 设置数据总数
            console.log(response.data.key_word)
            Echartspic();
            Key_words(response.data.key_word)
        })
        .catch(error => {
            console.error('发送数据到后端失败', error);
        });
}
function gousermsg(id) {
    router.push({ 
    name: 'usermsg',
    params: { 
      id: id
    } 
  });
}
function likeuser(id) {
    // 使用axios或其他方式将数据发送到后端
  axios.post('http://127.0.0.1:8000/car/api/likeuser/', 
        {
          likeuser_id:id,
          token:token
        }
    )
        .then(response => {
            // 处理后端返回的数据
         alert(response.data.message)
        })
        .catch(error => {
            // 处理错误
            console.error('发送数据到后端失败', error);
        });
}


// 提取雷达图数据
function Echartspic() {
    // 基于准备好的dom，初始化echarts实例
    let Chart = echarts.init(document.getElementById("Radar_chart"));
    // 绘制图表
    let options = {
        tooltip: {},
        radar: {
            // shape: 'circle',
            indicator: [
                { name: '空间', max: 5 },
                { name: '配置', max: 5 },
                { name: '驾驶感受', max: 5 },
                { name: '外观', max: 5 },
                { name: '内饰', max: 5 },
                { name: '性价比', max: 5 }
            ]
        },
        name: {
            textStyle: {
                color: '#132c33' // 修改指标名称的字体颜色为红色
            }
    },
    textStyle: { // 全局文字样式设置
        color: '#132c33' // 修改所有文字的颜色为红色
    },
        series: [{
            name: '评分',
            type: 'radar',
            data: [
                {
                    value: [
    Radar_chart.value[0].space,
    Radar_chart.value[0].configuration,
    Radar_chart.value[0].drivingExperience,
    Radar_chart.value[0].appearance,
    Radar_chart.value[0].interior,
    Radar_chart.value[0].costPerformance
],
                    name: '评分'
                }
            ]
        }]
    };

    // 渲染图表
    Chart.setOption(options);
}

function Key_words(Key_words) {
    // 基于准备好的dom，初始化echarts实例
    let Chart = echarts.init(document.getElementById("Key_words"));
    // 绘制图表
    let options = {
    backgroundColor: '',
    tooltip: {
        show: true
    },
    toolbox: {
        feature: {
            saveAsImage: {
                iconStyle: {
                    normal: {
                        color: '#FFFFFF'
                    }
                }
            }
        }
    },
    series: [{
        name: '评论词分析',
        type: 'wordCloud',
        sizeRange: [6, 66],
        rotationRange: [-45, 90],
        textPadding: 0,
        autoSize: {
            enable: true,
            minSize: 6
        },
        textStyle: {
            normal: {
                color: function() {
                    return 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')';
                }
            },
            emphasis: {
                shadowBlur: 10,
                shadowColor: '#333'
            }
        },
        data: Key_words
    }]
};
    // 渲染图表
    Chart.setOption(options);
}

const addnewcomment = ref({
  title: '',
  mileage: null,
  fuelConsumption: null,
  price: null,
  purchaseTime: '',
  purchaseLocation: '',
  advantages: '',
  disadvantages: '',
  space: null,
  configuration: null,
  drivingExperience: null,
  appearance: null,
  interior: null,
  costPerformance: null
});
const submitComment = () => {
    // 使用axios或其他方式将数据发送到后端
    axios.post('http://127.0.0.1:8000/car/api/addnewcomment/', {
        title: addnewcomment.value.title,
        mileage: addnewcomment.value.mileage,
        fuelConsumption: addnewcomment.value.fuelConsumption,
        price: addnewcomment.value.price,
        purchaseTime: addnewcomment.value.purchaseTime,
        purchaseLocation: addnewcomment.value.purchaseLocation,
        advantages: addnewcomment.value.advantages,
        disadvantages: addnewcomment.value.disadvantages,
        space: addnewcomment.value.space,
        configuration: addnewcomment.value.configuration,
        drivingExperience: addnewcomment.value.drivingExperience,
        appearance: addnewcomment.value.appearance,
        interior: addnewcomment.value.interior,
        costPerformance: addnewcomment.value.costPerformance,
        token: token,
        carid: carId,
    
    },
    )
        .then(response => {
            // 处理后端返回的数据
    
           alert(response.data.message)
        })
        .catch(error => {
            // 处理错误
            console.error('发送数据到后端失败', error);
        });
};


let image;
const number =  ref(Math.floor(Math.random() * 3) + 1);
switch (number.value) {
  case 1:
    image = avatar1;
    break;
  case 2:
    image = avatar2;
    break;
  case 3:
    image = avatar3;
    break;
  default:
    // 默认头像或者处理逻辑
    break;
}

</script>
<template>
    <div class="details">
        <div class="block1" >
            <div class="block_left">
                <ul v-for="(item, index) in cars" :key="index">
                    <li>
                        <div class="carname">
                            <a href="#">{{ item.c_series_name }}</a>
                        </div>
                    </li>
                    <li>
                        <div class="points">
                            <h4 style="color: #0f1423;">口碑评分</h4>
                            <div>
                                <em style="color: #f86b1d;"> {{ item.points }}</em>
                            </div>
                        </div>
                    </li>
                    <li class="guide" >
                        <div class="guideprice">
                            <h4 style="color: #0f1423;">厂商指导价</h4>
                            <div style="color: #ec2d7a;">{{ item.guideprice }}</div>
                            <div>
                                <h4 style="color: #0f1423;">二手车价格</h4>
                                <div style="color: #ec2d7a;">{{ item.Second_hand_prices }}</div>
                            </div>
                        </div>
                        
                        <br>
                        <br>
                        
                    </li>
                </ul>
            </div>
            <div class="block_center" id="Key_words">
            </div>
          
            <div class="block_right" id="Radar_chart">
            </div>
          
        </div>
 
        <div class="block2">
            <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item title="发表评论" name="1">
                  <div>
                    <el-card class="comment-form" shadow="hover">
                        <el-form ref="commentForm" :model="addnewcomment" label-width="80px" size="small">
                            <div style="display: flex;">
                            <!-- 评分 -->
                            <el-form-item label="空间" prop="space">
                            <el-rate v-model="addnewcomment.space" show-score></el-rate>
                            </el-form-item>
                            <el-form-item label="配置" prop="configuration">
                            <el-rate v-model="addnewcomment.configuration" show-score></el-rate>
                            </el-form-item>
                            <el-form-item label="驾驶感受" prop="drivingExperience">
                            <el-rate v-model="addnewcomment.drivingExperience" show-score></el-rate>
                            </el-form-item>
                            <el-form-item label="外观" prop="appearance">
                            <el-rate v-model="addnewcomment.appearance" show-score></el-rate>
                            </el-form-item>
                            <el-form-item label="内饰" prop="interior">
                            <el-rate v-model="addnewcomment.interior" show-score></el-rate>
                            </el-form-item>
                            <el-form-item label="性价比" prop="costPerformance">
                            <el-rate v-model="addnewcomment.costPerformance" show-score></el-rate>
                            </el-form-item>
                            </div>
                          <!-- 基本信息 -->
                          <el-form-item label="标题" prop="title">
                            <el-input v-model="addnewcomment.title"></el-input>
                          </el-form-item>
                          <el-form-item label="行驶里程(km)" prop="mileage">
                            <el-input v-model="addnewcomment.mileage" type="number"></el-input>
                          </el-form-item>
                          <el-form-item label="百公里油耗(L)" prop="fuelConsumption">
                            <el-input v-model="addnewcomment.fuelConsumption" type="number"></el-input>
                          </el-form-item>
                          <el-form-item label="裸车购买价格(万元)" prop="price">
                            <el-input v-model="addnewcomment.price" type="number"></el-input>
                          </el-form-item>
                          <el-form-item label="购买时间" prop="purchaseTime">
                            <el-date-picker v-model="addnewcomment.purchaseTime" type="date"></el-date-picker>
                          </el-form-item>
                          <el-form-item label="购买地点" prop="purchaseLocation">
                            <el-input v-model="addnewcomment.purchaseLocation"></el-input>
                          </el-form-item>
                          <el-form-item label="满意的地方" prop="advantages">
                            <el-input v-model="addnewcomment.advantages" type="textarea"></el-input>
                          </el-form-item>
                          <el-form-item label="不满意的地方" prop="disadvantages">
                            <el-input v-model="addnewcomment.disadvantages" type="textarea"></el-input>
                          </el-form-item>
                          <!-- 提交按钮 -->
                          <el-form-item>
                            <el-button type="primary" @click="submitComment">提交评论</el-button>
                          </el-form-item>
                        </el-form>
                      </el-card>
                  </div>
                </el-collapse-item>
              </el-collapse>
        </div>
        <div class="list_list_container__D0GCQ" v-if="comment && comment.length > 0">
            <ul class="list_list_con__h7GvV" v-for="(item, index) in comment" :key="index">
                <li class="clearfix">
                    <div class="list_user_msg__Mw2CQ">
                        <div class="clearfix">
                            <a  target="_blank" rel="noreferrer" @click="gousermsg(item.user.id)">
                                <div class="list_avatar__PfiA_"><img :src="image"  alt="" class=""></div>
                            </a><a  target="_blank" rel="noreferrer" @click="gousermsg(item.user.id)">
                                <div class="list_msg__B0Fvx">
                                    <p><span class="">{{ item.user.username }}</span></p>
                                </div>
                            </a>
                            <div class="list_follow__6iXXC"><span  @click="likeuser(item.user.id)">关注</span></div>
                        </div>
                        <div class="list_starcon__xEsCR">
                            <p class="list_timeline__1N6pP"><i></i>{{ item.time }}</p>
                        </div>
                     
                    </div>
                    <div class="list_kb_msg__U76oD">
                        <h1 class="list_kb_title__f__ml"><a target="_blank" rel="noreferrer">{{ item.title}}</a></h1>
                        <div class="list_medals__0uAYv"><i class="list_normal_jh__Ldb4T"></i></div>
                        <p class="list_car__aTF06">
                            <a target="_blank" rel="noreferrer" >
                                <span class="list_series__rwJ7c">{{item.c_series_name}}</span>
                            </a>
                            <span class="list_main_split__VY6kB"></span>
                            <a target="_blank" rel="noreferrer" ><span class="list_spec__Cwpy6">{{ item.c_spec_name }}</span></a>
                        </p>
                        <ul class="list_car_info__2l0lA clearfix">
                            <li class="list_item_info__EoTAO">
                                <div class="list_key__caXoL">{{ item.mileage }}</div>
                                <div class="list_name__s9MqN">行驶里程</div>
                            </li>
                            <li class="list_item_info__EoTAO">
                                <div class="list_key__caXoL">{{ item.fuel }}</div>
                                <div class="list_name__s9MqN">百公里油耗</div>
                            </li>
                            <li class="list_item_info__EoTAO">
                                <div class="list_key__caXoL">{{ item.price }}</div>
                                <div class="list_name__s9MqN">裸车购买价</div>
                            </li>
                            <li class="list_item_info__EoTAO">
                                <div class="list_key__caXoL">{{ item.buy_time }}</div>
                                <div class="list_name__s9MqN">购买时间</div>
                            </li>
                            <li class="list_item_info__EoTAO">
                                <div class="list_key__caXoL">{{ item.address }}</div>
                                <div class="list_name__s9MqN">购买地点</div>
                            </li>
                        </ul>
                        <div class="list_feeling__Ck33O">
                            <div class="list_normal__qyrOb list_nice__OfaVt">
                                <div class="list_normal_key__PrckT list_nice_key__KchbQ">满意</div>
                                <div class="list_nice_value__hI2Bw">{{item.satisfied}}</div>
                            </div>
                            <div class="list_normal__qyrOb list_worce__v1eLi">
                                <div class="list_normal_key__PrckT list_worce_key__HDbUB">不满意</div>
                                <div class="list_nice_value__hI2Bw">{{ item.dissatisfied }}</div>
                            </div>
                        </div>
        
                    </div>
                </li>
            </ul>
            
        </div>
        <div v-else>
            <el-empty description="暂无相关评论"></el-empty>
        </div>

        
    </div>
    
   
</template>
<style scoped>



</style>
